<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>
<table border="1">
    <caption>个人信息</caption>
    <tr>
        <td>照片</td>
        <td>
            <img src="head.jpg" style="width: 100px" alt="">
        </td>
    </tr>
    <tr>
        <td>名字:</td>
        <td id="name_td">xxx</td>
    </tr>
    <tr>
        <td>年龄:</td>
        <td id="age_td">xxx</td>
    </tr>
    <tr>
        <td>朋友们</td>
        <td>
            <ul>
                <li>xxx</li>
                <li>xxx</li>
                <li>xxx</li>
            </ul>
        </td>
    </tr>
</table>
<input type="button" value="请求数据">
<script src="jquery.min.js"></script>

<script>
    $("input").click(function () {
        let p = {name: "刘涛", url: "a.jpg", age: 43, friend: ["dad", "萨度萨度", "时代水岸"]};
        $("img").attr("src", p.uri);
        $("#name_td").text(p.name);
        $("#age_td").text(p.age);
        $("li").remove();
        for (let name of p.friend) {
            let li = $("<li></li>");
            li.text(name);
            $("ul").append(li);
        }
    })
</script>
</body>
</html>